<template>
    <div class="common">
        <el-container>
            <el-header class="top-header">
                <h3 class="logo">CMIMS</h3>
                <h3 class="title">社区医疗信息服务平台</h3>
                <el-dropdown split-button @command="handleClick" trigger="click">
                    <el-avatar v-if="loginData.user_img" class="avatar" :size="25" :src="loginData.user_img" />
                    <el-avatar v-else class="avatar" :size="25" src="src\assets\imgs\默认头像.png" />
                    &nbsp;
                    <span>{{ loginData.name }}</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="$router.push('/updatePassword')">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container class="content">
                <el-header class="menu-header">
                    <left-menu></left-menu>
                </el-header>
                <el-header class="menu-header-mobile">
                    <left-menu-mobile></left-menu-mobile>
                </el-header>
                <el-main>
                    <RouterView class="router-view"></RouterView>
                    <!-- 系统公告弹窗 -->
                    <el-dialog v-model="showAnnouncement" title="系统公告" :width="dialogWidth">
                        <p v-text="announcement"></p>
                    </el-dialog>
                    <div class="opinion-box" @click="showOpinion = !showOpinion">
                        <span class="iconfont icon-yijianfankui opinion-img"></span>
                        <p v-text="'意见反馈'"></p>
                    </div>
                    <!-- 意见反馈弹窗 -->
                    <el-dialog v-model="showOpinion" title="意见反馈" :width="dialogWidth">
                        <el-form :model="opinion" label-width="120px" :rules="rules" ref="opinionForm">
                            <el-form-item label="反馈内容" prop="content">
                                <el-input v-model="opinion.content" :autosize="{ minRows: 3, maxRows: 20 }"
                                    type="textarea" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit(this.announcement)">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { opinionAddAPI } from "@/api/opinion";
import { announcementFindAPI } from "@/api/system";
import LeftMenu from "@/views/home/LeftMenu.vue";
import { ElMessage } from "element-plus";
import { RouterView } from "vue-router";
import LeftMenuMobile from "./LeftMenuMobile.vue";
export default {
    components: {
        LeftMenu,
        LeftMenuMobile,
        RouterView
    },
    data() {
        return {
            loginData: {},
            announcement: '',
            showAnnouncement: false,
            dialogWidth: '700px',
            opinion: {},
            rules: {
                content: [
                    { required: true, message: '请输入反馈内容', trigger: 'blur' },
                ]
            },
            showOpinion: false
        }
    },
    methods: {
        handleClick(command) {
            if (command == 'logout') {
                sessionStorage.removeItem('user');
                this.$router.push('/login');
            }
        },
        loadAnnouncementList() {
            announcementFindAPI().then((resp) => {
                if (resp.data.code == 2000) {
                    this.announcement = resp.data.data;
                    if (sessionStorage.getItem('announcement') == null || sessionStorage.getItem('announcement') != this.announcement) {
                        this.showAnnouncement = true;
                        sessionStorage.setItem('announcement', this.announcement);
                    }
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        setDialogWidth() {
            if (window.innerWidth < 768) {
                this.dialogWidth = '98vw';
            } else {
                this.dialogWidth = '700px';
            }
        },
        submit() {
            this.opinion.userId = JSON.parse(sessionStorage.getItem('user')).user_id;
            this.$refs.opinionForm.validate((val) => {
                if (val) {
                    opinionAddAPI(this.opinion).then((resp) => {
                        if (resp.data.code == 2000) {
                            ElMessage.success('提交成功');
                            this.showOpinion = false;
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                }
            });
        }
    },
    created() {
        let residentInfo = sessionStorage.getItem('user');
        if (residentInfo) {
            this.loginData = JSON.parse(residentInfo);
        } else {
            this.$router.push('/login');
        }
        // 获取前一个页面的method
        let method = this.$route.query.method;
        let orders = {};
        orders.id = this.$route.query.out_trade_no;
        if (method && method.includes('alipay.trade.page.pay.return')) {
            ElMessage.success('支付成功');
        }
        // 如果第一次进入本页面,显示公告
        this.loadAnnouncementList();
    },
    mounted() {
        this.setDialogWidth();
        window.addEventListener('resize', this.setDialogWidth);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setDialogWidth);
    }
}
</script>

<style scoped>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.el-main {
    height: auto;
}

.common {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.el-container {
    height: 100%;
    /* width: 100%; */
    /* overflow: hidden; */
}

.common {
    background-color: #ddd;
    background-image: url("@/assets/imgs/主页背景图.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
}

.top-header {
    background-color: #007BFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    font-family: "楷体";
    letter-spacing: 0.3em;
    width: 100%;
}

.top-header .logo {
    height: 100%;
    font-family: '思源黑体';
    font-style: italic;
}

.menu-header {
    position: relative;
    margin-top: 20px;
    opacity: 0.95;
}

.menu-header-mobile {
    display: none;
}

.el-main {
    width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    position: relative;
}

.content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* justify-content: center; */
}

.router-view {
    /* 隐藏滚动条 */
    overflow: hidden;
    /* 允许垂直滚动 */
    /* overflow-y: auto; */
    /* 隐藏滚动条（Firefox） */
    scrollbar-width: none;
    /* 隐藏滚动条（IE 和 Edge） */
    -ms-overflow-style: none;
    display: flex;
    align-items: start;
    justify-content: center;
    /* opacity: 0.9; */
}

.center-content::-webkit-scrollbar {
    /* 隐藏滚动条（Chrome, Safari 和 Opera） */
    display: none;
}

.opinion-box {
    cursor: pointer;
    position: fixed;
    right: 5vw;
    bottom: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #8a8a8a;

    &:hover {
        color: #409EFF;
    }
}

.opinion-img {
    /* width: 50px;
    height: 50px; */
    font-size: 50px;
}

@media (max-width: 768px) {

    html,
    body {
        width: 100vw;
        height: 100vh;
    }

    .common {
        background-position: center;
        width: 100vw;
    }

    .title {
        display: none;
    }

    .el-main {
        width: 100%;
        padding: 0px;
        margin-top: 10px;
        margin-bottom: 9vh;
    }

    .menu-header {
        /* margin-top: 0; */
        display: none;
        width: 100vw;
    }

    .menu-header-mobile {
        width: 168vw;
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
    }

    .opinion-box {
        right: 0vw;
        bottom: 8vh;
        font-size: 12px;
    }

    .opinion-img {
        font-size: 40px;
    }
}
</style>